<template>
  <div id="container-radar"></div>
</template>

<script>
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
export default {
  name: 'SquareRadarChart',
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {},
  watch: {
    chartData: {
      handler(val) {
				setTimeout(() => {
					let data = val
					let { DataView } = DataSet;
					let dv = new DataView().source(data);
					dv.transform({
						type: 'fold',
						fields: ['数量'], // 展开字段集
						key: 'user', // key字段
						value: 'score', // value字段
					});

					this.chart = new Chart({
						container: 'container-radar',
						autoFit: true,
						height: 300,
					});
					this.chart.data(dv.rows);
					this.chart.scale('score', {
						min: 0,
						max: 80
					});
					this.chart.coordinate('polar', {
						radius: 0.8,
					});
					this.chart.tooltip({
						shared: true,
						showCrosshairs: true,
						crosshairs: {
							line: {
								style: {
									lineDash: [4, 4],
									stroke: '#333'
								}
							}
						}
					});
					this.chart.axis('item', {
						line: null,
						tickLine: null,
						grid: {
							line: {
								style: {
									lineDash: null,
								},
							},
						},
					});
					this.chart.axis('score', {
						line: null,
						tickLine: null,
						grid: {
							line: {
								type: 'line',
								style: {
									lineDash: null,
								},
							},
						},
					});

					this.chart
						.line()
						.position('item*score')
						.color('user')
						.size(2);
					this.chart
						.point()
						.position('item*score')
						.color('user')
						.shape('circle')
						.size(4)
						.style({
							stroke: '#fff',
							lineWidth: 1,
							fillOpacity: 1,
						});
					this.chart
						.area()
						.position('item*score')
						.color('user');
					this.chart.render();
				}, 300);
      },
			immediate: true
    }
  },
  computed: {},
  methods: {
  },
  beforeDestroy() {
    this.chart.destroy()
  },
}
</script>

<style lang='scss' scoped>
</style>


